<template>
    <div id="chaxun">

<mt-header fixed title="寄件区">
			<router-link to="/" slot="left">
				<mt-button icon="back">返回</mt-button>
			</router-link>
			<mt-button icon="more" slot="right"></mt-button>
		</mt-header>

        </br>
      <input v-model='search' class="search" placeholder="请输入快递公司">
        <div id="search">
            <ul v-for="item in searchData ">
                <li>
                    <div class="odiv">
                        <img v-bind:src="item.imagesrc">
                        <a @click="yidong">{{item.title}}</a>
                        ({{item.time}})
                    </div>
                </li>
            </ul>
        </div>
        </br></br></br>

    </div>
</template>

<script>
export default {
    name: 'search',
    data () {
        return {
            search: '',
            xinwens: [{
                title: '申通快递',
                time: '说明：首重8元续重一斤1元',
                imagesrc: "../../assets/new1.jpg",
                fenlei:"st"
            },{
                title: '韵达快递',
                time: '说明：首重8元续重一斤1元',
                imagesrc: "../../assets/new2.jpg",
                fenlei:"yd"
            },{
                title: '圆通快递',
                time:'说明：首重8元续重一斤1元',
                imagesrc: "../../assets/new3.jpg"
            },{
                title: '天天快递',
                time: '说明：首重8元续重一斤1元',
                imagesrc: "../../assets/new4.jpg",
                fenlei:"tt"
            },{
                title: '中通快递',
                time:'说明：首重8元续重一斤1元',
                imagesrc: "../../assets/new5.jpg",
                fenlei:"zt"
            }, {
                title: '顺丰快递',
                time:'说明：首重12元续重一斤1元',
                imagesrc: "../../assets/new6.jpg",
                fenlei:"sf"
            },{
                title: '百世汇通',
                time:'说明：首重8元续重一斤1元',
                imagesrc:"../../assets/new7.jpg",
                fenlei:"ht"
            },{
                title: 'EMS邮政',
                time:'说明：首重8元续重一斤1元',
                imagesrc:"../../assets/new8.jpg",
                fenlei:"EMS"
            },{
                title: '如风达',
                time:'说明：首重8元续重一斤1元',
                imagesrc:"../../assets/new9.jpg",
                fenlei:"rf"
            }
            ]
        }
    },
    computed: {
        searchData: function() {
            var search = this.search;
            if (search) {
                return this.xinwens.filter(function(xinwen) {
                    return Object.keys(xinwen).some(function(key) {
                        return String(xinwen[key]).toLowerCase().indexOf(search) > -1
                    })
                })
            }
            return this.xinwens;
        }
    },
    methods : {
        yidong(){
         this.$router.push({ path:'/functionTwochoose'})
        }
    }
}
</script>

<style>
#chaxun{
    width:100%;
}

#chaxun span{
    width:10%;
    height:10px;
    background-color:#26A2FF;
    color:white;
    text-align:center;
    padding:13px;
    padding-left:10px;
    padding-right:10px;
}

.search{
    width:80%;
    height:39px;
    border: 1px solid #26A2FF;
    font-size:15px;
    background:url(../../assets/search.png) no-repeat;
    background-size:30px 30px;
    background-position:right;
}

.odiv img{
    height:auto;
    width:35%;
}

.odiv{
	width:93%;

	box-shadow:inset 0px 0px 0px 1px #000;
	padding:15px;
	border-radius:10px;
	font-size:16px;

}

#search{
    margin-top:15px;
}

#search ul{
    margin:3px;
    margin-left:0px;
    margin-right:0px;
    margin-top:10px;
}

.odiv a{
    position:absolute;
    float:left;
    color:black;
}

</style>